﻿@{
    this.ViewBag.Title = "Ribeiro | MobileTrack | Gestión de Usuarios";
}

<div>
    <table id="users">
    </table>
    <div id="userspager">
    </div>
</div>

<div id="registerUserDialog" title="Registrar Usuario">
</div>

<div id="editUserDialog" title="Editar Usuario">
</div>

@section scripts {
    <script type="text/javascript">

        $(document).ready(function () {

            $('#users').jqGrid({
                url: '@this.Url.Action("ListUsers")',
                datatype: 'json',
                shrinkToFit: true,
                forceFit: true,
                autowidth: true,
                rowNum: 50,
                rowList: [10, 50, 100],
                width: 'auto',
                height: 'auto',
                caption: "Usuarios",
                sortable: false,
                cellEdit: true,
                multiselect: true,
                cellsubmit: 'clientArray',
                pager: '#userspager',
                jsonReader: { repeatitems: false, id: '0' },
                colNames: ['Usuario', 'Email', 'Rol', 'Sucursal'],
                colModel: [
                    { name: 'UserName', index: 'UserName' },
                    { name: 'Email', index: 'Email' },
                    { name: 'Role', index: 'Role' },
                    { name: 'Sucursal', index: 'Sucursal' },
   	            ]
            });

            $('#users').jqGrid(
                'navGrid',
                '#userspager',
                {
                    addtitle: 'Registrar usuario', deltitle: 'Eliminar usuario', edittitle: 'Editar usuario',
                    add: true, del: true, edit: true, search: false, refresh: true,
                    addfunc: function () { registerUser(); },
                    editfunc: function (id) { editUser(id); },
                    delfunc: function (rows) {
                        if (confirm("¿Desea eliminar los usuarios seleccionados?")) {
                            
                            $.ajax({
                                url: '@this.Url.Action("DeleteUser")',
                                type: 'POST',
                                data: { 'userNames': rows },
                                dataType: "json",
                                traditional: true,
                                success: function () {
                                    $("#users").trigger("reloadGrid");
                                }
                            });
                        }
                    }
                });

            $("#registerUserDialog").dialog({
                modal: true,
                height: 320,
                width: 380,
                autoOpen: false,
                resizable: false,
                buttons: {
                    "Guardar": function () {
                        if ($("form").validate().form()) {
                            $.ajax({
                                url: '@this.Url.Action("RegisterUser")',
                                type: 'POST',
                                data: $("#registerUserDialog form").serialize(),
                                success: function (result) {
                                    $("#registerUserDialog").dialog("close");
                                    $("#users").trigger("reloadGrid");
                                }
                            });
                        }
                    },
                    "Cancelar": function () {
                        $(this).dialog("close");
                    }
                }
            });

            $("#editUserDialog").dialog({
                modal: true,
                height: 320,
                width: 380,
                autoOpen: false,
                resizable: false,
                buttons: {
                    "Guardar": function () {
                        if ($("form").validate().form()) {
                            $.ajax({
                                url: '@this.Url.Action("EditUser")',
                                type: 'POST',
                                data: $("#editUserDialog form").serialize(),
                                success: function (result) {
                                    $("#editUserDialog").dialog("close");
                                    $("#users").trigger("reloadGrid");
                                }
                            });
                        }
                    },
                    "Cancelar": function () {
                        $(this).dialog("close");
                    }
                }
            });

        });

        function registerUser() {
            $.ajax({
                url: '@this.Url.Action("RegisterUser")',
                type: "GET",
                success: function (result) {
                    $("#registerUserDialog").html(result);
                    $.validator.unobtrusive.parse('#registerUserDialog');
                    $("#registerUserDialog").dialog('open');
                }
            });
        }

        function editUser(index) {
            $.ajax({
                url: '@this.Url.Action("EditUser")',
                type: "GET",
                success: function (result) {
                    $("#editUserDialog").html(result);
                    var datarow = $("#users").jqGrid('getRowData', index);
                    $("#editUserDialog form fieldset #UserName").val(datarow.UserName);
                    $("#editUserDialog form fieldset #Email").val(datarow.Email);
                    $("#editUserDialog form fieldset #Role").val(datarow.Role);
                    $("#editUserDialog form fieldset #Sucursal").val(datarow.Sucursal);
                    $.validator.unobtrusive.parse('#editUserDialog');
                    $("#editUserDialog").dialog('open');
                }
            });
        }

    </script>
}
